<template>
  <div class="equipment">
     <div class="table-box">
        <IconTitle title="基本信息" imgUrl="yunwei">
          <span class="slot">品牌管理</span>
        </IconTitle>
        <div class="echarts-box">
          <el-row :gutter="10">
            <el-col :span="8"
              ><div class="echarts-item">
                <div class="item-title">
                  <i class="icon-ziliao"></i>
                  <span>设备等级分布</span>
                  <p>fault</p>

                </div>
              <div>
                <div v-for="(item,index) in errorLevels" :key="index" class="errorlevel">
                  <el-row>
                    <el-col :span="7">
                      <label class="name">{{item.name}}</label> <label>{{item.percentage}}</label>
                    </el-col>
                    <el-col :span="14">
                      <el-progress :stroke-width="9" :percentage="item.value" :color="index==0?'#25C689':index==1?'#FF9800':index==2?'#E51C23':''" :format="levelFormat"></el-progress>
                    </el-col>
                    <el-col :span="3">
                      <label>{{item.value}}</label>
                    </el-col>
                  </el-row>

                </div>
              </div>
              </div>
            </el-col
            >
            <el-col :span="8"
              ><div class="echarts-item">
                <div class="item-title">
                  <i class="icon-ziliao"></i>
                  <span>设备使用状态</span>
                  <p>fault</p>
                </div>
              <div id="status-echart" style="width: 100%;height:220px;"></div>

              </div>
            </el-col>
            <el-col :span="8"
              ><div class="echarts-item">
                <div class="item-title">
                  <i class="icon-ziliao"></i>
                  <span>设备年龄分布</span>
                  <p>fault</p>
                </div>
              <div id="age-echart" style="width: 100%;height:220px;"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
     <div class="table-box">
      <IconTitle title="状态统计" imgUrl="yunwei">
      </IconTitle>
      <div class="echarts-box">
        <el-row class="statusAnalysis">
          <el-col :span="8" class="saleft">
            <img src="@/static/imgs/finishedRate.png"/>
            <div class="frright1">
              <div class="frright1top">
                <p>
                  <label>09</label>
                  <i style="margin-left: 11px" class="el-icon-caret-top"></i>
                </p>
                <p>
                  <label>带病运行</label>
                </p>
              </div>
              <div class="frright1bottom">
                <p>
                  <label>05</label>
                </p>
                <p>
                  <label>带病运行</label>
                </p>
              </div>
            </div>
            <div>
              <div class="frright2">
                <p>
                  <label>40</label>
                </p>
                <p>
                  <label>设备总数</label>
                </p>
              </div>
            </div>
            <div style="height: 90px;width: 1px;background: #DDDDDD;margin-left: 20%"></div>
          </el-col>
          <el-col :span="16" class="saRight">
            <el-row>
              <el-col :span="7" class="status">
                <img src="@/static/imgs/status1.png"/>
               <div>
                 <label>
                   正常
                 </label>
                 <label class="count">
                   78
                 </label>
                 <label class="unit">
                   台
                 </label>
               </div>
              </el-col>
              <el-col :span="7" class="status">
                <img src="@/static/imgs/status2.png"/>
                <div>
                  <label>
                    带病运行
                  </label>
                  <label class="count">
                    9
                  </label>
                  <label class="unit">
                    台
                  </label>
                </div>
              </el-col>
              <el-col :span="7" class="status">
                <img src="@/static/imgs/status3.png"/>
                <div>
                  <label>
                    故障
                  </label>
                  <label class="count">
                    5
                  </label>
                  <label class="unit">
                    台
                  </label>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
     <div class="table-box">
      <IconTitle title="价值排行" imgUrl="yunwei">
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="12"
          >
            <div class="echarts-item">
            <div class="item-title">
              <i class="icon-ziliao"></i>
              <span>采购金额</span>
              <p>original</p>

            </div>
            <div>
              <div v-for="(item,index) in amountData" :key="index" class="amountData">
                <el-row>
                  <el-col :span="14">
                    <div class="rowdata">
                      <img src="@/static/imgs/1.png"/>
                      <div>
                        <label class="name">{{item.name}}</label>
                        <p></p>
                      </div>
                      (<label class="price">¥{{item.price}}</label>)
                    </div>
                  </el-col>
                  <el-col :span="10">
                    <label>{{item.date}}</label>
                  </el-col>
                </el-row>

              </div>
            </div>
          </div>
          </el-col
          >
          <el-col :span="12"
          >

            <div class="echarts-item">
            <div class="item-title">
              <i class="icon-ziliao"></i>
              <span>资产净值</span>
              <p>price</p>
            </div>
              <div>
                <div v-for="(item,index) in amountData" :key="index" class="netAssetValue">
                  <el-row>
                    <el-col :span="14">
                      <div class="rowdata">
                        <img src="@/static/imgs/1.png"/>
                        <div>
                          <label class="name">{{item.name}}</label>
                          <p></p>
                        </div>
                        (<label class="price">¥{{item.price}}</label>)
                      </div>
                    </el-col>
                    <el-col :span="10">
                      <label>{{item.date}}</label>
                    </el-col>
                  </el-row>

                </div>
              </div>
          </div>
          </el-col>
        </el-row>
      </div>
    </div>
    
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";

export default {
  name: "equipment",
  components: {
      IconTitle
  },

  data() {
    return {
        errorLevels: [
            {name: 'A(一般)',percentage: '82%',value: 82},
            {name: 'B(严重)',percentage: '6%',value: 3},
            {name: 'C(紧急)',percentage: '12%',value: 5},
        ],
        amountData: [
            {name: 'F300矫形部分',price: '5000',date: '2021-12-15',url: '1'},
            {name: 'F300矫形部分',price: '5000',date: '2021-12-15',url: '2'},
            {name: 'F300矫形部分',price: '5000',date: '2021-12-15',url: '3'},
        ]
    };
  },
  created() {
   
  },
  mounted() {
      this.statusEchartFun()
      this.ageEchartFun()
  },
  methods: {
      levelFormat(){},
      statusEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('status-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item'
              },
              legend: {
                  orient: 'vertical',
                  left: 'right',
                  top: 40
              },
              series: [
                  {
                      name: '',
                      type: 'pie',
                      radius: ['40%','60%'],
                      itemStyle: {
                          borderRadius: 10,
                          borderColor: '#fff',
                          // borderWidth: 0.1
                      },
                      data: [
                          { value: 1048, name: '在用',itemStyle:{color:'#5087EC'} },
                          { value: 735, name: '禁用',itemStyle:{color:'#68BBC4' }},
                          { value: 580, name: '出租',itemStyle:{color:'#58A55C' }},
                          { value: 484, name: '报废',itemStyle:{color:'#F2BD42' }},
                          { value: 300, name: '其他' ,itemStyle:{color:'#EE752F'}}
                      ],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)',
                          }
                      }
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      ageEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('age-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  type: 'category',
                  data: ['1年之内', '1至3年', '3至5年', '5至10年', '10年以上']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      data: [120, 200, 150, 80, 70],
                      type: 'bar',
                      itemStyle: {
                          color: '#5087EC'
                      }
                  },

              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
  },
};
</script>
<style lang="scss" >
@import "@/styles/color.scss";
.equipment{
  .statusAnalysis{
    .saleft{
      display: flex;
      height: 90px;
      label{
        color: #606266;font-size: 14px;
      }
      .frright1{
        line-height: 20px;
        margin: 0 20px;
      }
      .frright2{
        margin-top: 30px;
        label{
          color: #101010;
        }
        p:nth-child(1){
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
    .saRight{
      height: 90px;

      .status{
        display: flex;
        img{margin: 0 15px}
        div{
          margin-top: 26px;
          .count{
            font-size: 23px;
            font-weight: 500;
            color: #606266;
          }
        }
      }
    }
  }
  .errorlevel{
    margin-top: 30px;
    font-size: 14px;
    label{
      color: #8C8C8C;
    }
    label.name{
      color:#101010;
      margin-right: 12px;
    }
  }
  .amountData,.netAssetValue{
    margin-top: 30px;
    font-size: 14px;
    .rowdata{
      display: flex;
      img{
        width: 29px;
        height: 29px;
      }
      label{
        color: #8C8C8C;
      }
      label.name{
        color:#101010;
        margin:0 12px 0 23px;
      }
      label.name+p{
        width: 60px;
        height: 4px;
        border-radius: 32px 32px 32px 32px;
        background-color: rgba(37, 155, 36, 100);
        margin:8px 12px 0 23px;
      }
      label.price{
        color: #CAC27B;
      }
    }

  }
}

</style>
